<route lang="json5">
  {
    style: {
      navigationBarTitleText: '绿色积分',
    },
  }
  </route>

<template>
  <view class="container">



    <!-- 统计卡片 -->
    <view class="stats-card">
      <view class="total-amount">
        <text class="amount-label">余额</text>
        <text class="amount">{{ indexData.activity_points.toFixed(4) }}</text>
      </view>
      <view class="stats-row">
        <view class="stats-item">
          <text class="label">累计收入</text>
          <text class="value">{{ indexData.total_plus.toFixed(4) }}</text>
        </view>
        <view class="divider"></view>
        <view class="stats-item">
          <text class="label">累计支出</text>
          <text class="value">{{ indexData.total_minus.toFixed(4) }}</text>
        </view>
      </view>
    </view>

    <!-- 分类标签 -->
    <view class="tabs">
      <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }"
        @click="switchTab(index)">
        <text>{{ tab }}</text>
      </view>
    </view>

    <!-- 交易列表 -->
    <scroll-view class="transaction-list" scroll-y @scrolltolower="loadMore" refresher-enabled
      :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
      <view v-for="(item, index) in transactions" :key="index" class="transaction-item">
        <view class="trans-type">
          <text>{{ item.type_text }}</text>
        </view>
        <view class="trans-info">
          <text class="trans-id">交易号: {{ item.sn }}</text>
          <text class="trans-time">{{ item.create_time }}</text>
        </view>
        <view class="trans-amount" :class="item.num > 0 ? 'income' : 'expense'">
          <text>{{ item.num > 0 ? '+' : '' }}{{ item.num }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { getActivityPointsListAPI } from '@/service/index/index'

const totalAmount = ref(0);
const totalIncome = ref(0);
const totalExpense = ref(0);
const currentTab = ref(0);
const isRefreshing = ref(false);

const tabs = ['全部', '收入', '支出'];

const transactions = ref<any[]>([]);

const indexData = ref({
  activity_points: 0,
  total_minus: 0,
  total_plus: 0,
})



const updateTotals = () => {
  totalIncome.value = transactions.value
    .filter(t => t.amount > 0)
    .reduce((sum, t) => sum + t.amount, 0);

  totalExpense.value = Math.abs(transactions.value
    .filter(t => t.amount < 0)
    .reduce((sum, t) => sum + t.amount, 0));

  totalAmount.value = totalIncome.value - totalExpense.value;
};

const switchTab = (index: number) => {
  currentTab.value = index;
  params.value.page = 1
  params.value.type = index
  console.log(params.value)
  getActivityPointsList()
};

const loadMore = () => {
  // 加载更多数据
  params.value.page++
};
const params = ref({
  page: 1,
  pageSize: 10,
  type: currentTab.value,
})
const getActivityPointsList = async () => {
  const res = await getActivityPointsListAPI(params.value)
  if (res.code === 1) {
    transactions.value = res.data.list
    indexData.value.activity_points = res.data.activity_points
    indexData.value.total_minus = res.data.total_minus
    indexData.value.total_plus = res.data.total_plus
  }
}

const onRefresh = () => {
  isRefreshing.value = true;
  setTimeout(() => {
    updateTotals();
    isRefreshing.value = false;
  }, 1000);
};

const showDetail = (item: any) => {
  uni.showToast({
    title: `查看交易详情：${item.id}`,
    icon: 'none'
  });
};

const goBack = () => {
  uni.navigateBack();
};

// 初始化
updateTotals();

//#ifdef H5
onMounted(() => {
  getActivityPointsList()
})
//#endif
//#ifdef APP-PLUS ||MP-WEIXIN
onLoad(() => {
  getActivityPointsList()
})
//#endif
</script>

<style>
page {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  background: linear-gradient(to right, #ff6b81, #ff4757);
}

.back-icon {
  color: #ffffff;
}

.title {
  flex: 1;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
}

.transfer-btn {
  color: #ffffff;
  font-size: 14px;
}

.stats-card {
  padding: 40rpx 30rpx;
  background: linear-gradient(to right, #ff6b81, #ff4757);
}

.total-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.amount-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10rpx;
}

.amount {
  font-size: 32px;
  color: #ffffff;
  font-weight: bold;
}

.stats-row {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16rpx;
  padding: 30rpx;
}

.stats-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.divider {
  width: 2rpx;
  height: 60rpx;
  background-color: #e0e0e0;
  margin: 0 20rpx;
}

.label {
  font-size: 14px;
  color: #666666;
  margin-bottom: 10rpx;
}

.value {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}

.tabs {
  display: flex;
  height: 88rpx;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666666;
  position: relative;
}

.tab-item.active {
  color: #ff4757;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #ff4757;
  border-radius: 2rpx;
}

.transaction-list {
  flex: 1;
  overflow: auto;
}

.transaction-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #ffffff;
  margin-bottom: 2rpx;
}

.trans-type {
  width: 120rpx;
  font-size: 14px;
  color: #666666;
}

.trans-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.trans-id {
  font-size: 12px;
  color: #999999;
  margin-bottom: 6rpx;
}

.trans-time {
  font-size: 12px;
  color: #999999;
}

.trans-amount {
  font-size: 16px;
  font-weight: bold;
}

.trans-amount.income {
  color: #2ecc71;
}

.trans-amount.expense {
  color: #ff4757;
}
</style>
